<template>
    <Header />
    <div class="container">
        <h1 class="title">用户反馈</h1>
        <form @submit.prevent="submitFeedback">

          <div class="form-group">
            <label for="description" class="form-label">您的意见是对我们最大的支持！</label>
            <textarea id="description" v-model="feedback.content" required class="form-input"></textarea>
            <p v-if="missingFeedback" class="alert">反馈内容不能为空</p>
          </div>

          <button class="submit-btn" type="submit" :disabled="!feedback.content">提交反馈</button>

        </form>
      </div>
    <Footer />
</template>

    <script>
    import Header from '@/components/Header.vue';
    import Footer from '@/components/Footer.vue';
    import feedbackService from '@/api/feedback.js';
    import {ElMessage} from "element-plus";

    export default {
        components:{
            Header,
            Footer
        },
      data() {
        return {
          feedback: {
            content: '',
          },
          missingFeedback: false,
        }
      },
      methods: {
        async submitFeedback() {
          if (!this.feedback.content) {
            this.missingFeedback = true;
            return;
          } else {
            this.missingFeedback = false;
          }

          const response = await feedbackService.submitFeedback(this.feedback);
          if(response.status === 200) {
            ElMessage.success("反馈成功提交!");
            this.feedback.content = '';
          } else {
            ElMessage.error("提交失败，请稍后重试");
          }
        }
      }
    }
    </script>

    <style scoped>
    .container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 90vh;
      font-size: 16px;
    }

    .title {
      font-size: 2.5em;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      width: 600px;
      margin-bottom: 20px;
    }

    .form-label {
      margin-bottom: 10px;
    }

    .form-input {
      padding: 10px;
      font-size: 1.2em;
      border: 2px solid #5C6E91;
      border-radius: 5px;
      height:200px;
    }

    .alert {
      color: red;
      margin-top: 10px;
    }

    .submit-btn {
      padding: 10px;
      font-size: 1.2em;
      border: none;
      border-radius: 5px;
      color: #ffffff;
      background-color: #5C6E91;
      cursor: pointer;
    }

    .submit-btn:hover {
      background-color: #df3315;
    }
    </style>
